panelMenu: add a gap between the panel and its menus

The specs call for a 2 pixel gap between the panel and its menus,
though we need to specify this as 4 pixels, since it's relative to the
bottom of the icon/title, not the bottom of the panel (up until now,
the point of the menu arrow was actually overlapping the menu's
highlight underline).

Also, move the gap specification into the CSS, since it makes more
sense there.

https://bugzilla.gnome.org/show_bug.cgi?id=655627

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 89fbbec83e6244b3f0915f3ce7017cb44f22f858..4199e5461d27c3715d225524ddc0950583daf99c 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -321,6 +321,10 @@ StTooltip StLabel {
     icon-shadow: black 0px 2px 2px;
 }
 
+.panel-menu {
+    -boxpointer-gap: 4px
+}
+
 /* The rounded panel corners we draw don't
  * support transitions, so disable transitions
  * for the buttons at the left/right edges

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 992a954ed4337dfdc34dff1def8603e1d267ab30..811695d063ff880669432a01a20d1335308ed159 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -609,7 +609,7 @@ AppIconMenu.prototype = {
         if (St.Widget.get_default_direction() == St.TextDirection.RTL)
             side = St.Side.RIGHT;
 
-        PopupMenu.PopupMenu.prototype._init.call(this, source.actor, 0.5, side, 0);
+        PopupMenu.PopupMenu.prototype._init.call(this, source.actor, 0.5, side);
 
         // We want to keep the item hovered while the menu is up
         this.blockSourceEvents = true;

diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js
index 705184816c5a08e3cda2d72ed4e1f012844b9f87..1523ef6504f91a12c58365167b6d77881762a3b1 100644 (file)
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -180,7 +180,7 @@ BoxPointer.prototype = {
         this.bin.allocate(childBox, flags);
 
         if (this._sourceActor && this._sourceActor.mapped)
-            this._reposition(this._sourceActor, this._gap, this._alignment);
+            this._reposition(this._sourceActor, this._alignment);
     },
 
     _drawBorder: function(area) {
@@ -306,19 +306,18 @@ BoxPointer.prototype = {
         cr.stroke();
     },
 
-    setPosition: function(sourceActor, gap, alignment) {
+    setPosition: function(sourceActor, alignment) {
         // We need to show it now to force an allocation,
         // so that we can query the correct size.
         this.actor.show();
 
         this._sourceActor = sourceActor;
-        this._gap = gap;
         this._alignment = alignment;
 
-        this._reposition(sourceActor, gap, alignment);
+        this._reposition(sourceActor, alignment);
     },
 
-    _reposition: function(sourceActor, gap, alignment) {
+    _reposition: function(sourceActor, alignment) {
         // Position correctly relative to the sourceActor
         let sourceNode = sourceActor.get_theme_node();
         let sourceContentBox = sourceNode.get_content_box(sourceActor.get_allocation_box());
@@ -338,6 +337,9 @@ BoxPointer.prototype = {
         let margin = (4 * borderRadius + borderWidth + arrowBase);
         let halfMargin = margin / 2;
 
+        let themeNode = this.actor.get_theme_node();
+        let gap = themeNode.get_length('-boxpointer-gap');
+
         let resX, resY;
 
         switch (this._arrowSide) {

diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index dd559ca29d86f350168b45f7459ff195b86420dc..6cb96e222f41a88d83b61a427e4147789736a809 100644 (file)
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -23,7 +23,8 @@ Button.prototype = {
         this.actor._delegate = this;
         this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPress));
         this.actor.connect('key-press-event', Lang.bind(this, this._onSourceKeyPress));
-        this.menu = new PopupMenu.PopupMenu(this.actor, menuAlignment, St.Side.TOP, 0);
+        this.menu = new PopupMenu.PopupMenu(this.actor, menuAlignment, St.Side.TOP);
+        this.menu.actor.add_style_class_name('panel-menu');
         this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));
         this.menu.actor.connect('key-press-event', Lang.bind(this, this._onMenuKeyPress));
         Main.chrome.addActor(this.menu.actor, { affectsStruts: false });

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 9e256b58fe7defe44e6f6bda4d09638ee5a811cf..9ee304dab0c8262cb5f05f5661c0836159fd6a8f 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -985,12 +985,11 @@ function PopupMenu() {
 PopupMenu.prototype = {
     __proto__: PopupMenuBase.prototype,
 
-    _init: function(sourceActor, alignment, arrowSide, gap) {
+    _init: function(sourceActor, alignment, arrowSide) {
         PopupMenuBase.prototype._init.call (this, sourceActor, 'popup-menu-content');
 
         this._alignment = alignment;
         this._arrowSide = arrowSide;
-        this._gap = gap;
 
         this._boxPointer = new BoxPointer.BoxPointer(arrowSide,
                                                      { x_fill: true,
@@ -1048,7 +1047,7 @@ PopupMenu.prototype = {
 
         this.isOpen = true;
 
-        this._boxPointer.setPosition(this.sourceActor, this._gap, this._alignment);
+        this._boxPointer.setPosition(this.sourceActor, this._alignment);
         this._boxPointer.show(animate);
 
         this.emit('open-state-changed', true);